<template>
  <div class="fault-analysis-container">
    <!-- 页面标题 -->
    <el-page-header content="故障深度分析" style="margin-bottom: 20px;"></el-page-header>

    <!-- 故障类型分布图表 -->
    <el-card shadow="hover" class="stat-card">
      <div slot="header">
        <span>故障类型分布</span>
      </div>
      <!-- 图表容器直接使用居中样式 -->
      <div class="chart-center">
        <div id="faultTypePie" style="width: 80%; height: 500px; margin: 0 auto;"></div>
      </div>
    </el-card>

<!--    &lt;!&ndash; 新增故障传播路径分析卡片 &ndash;&gt;-->
<!--    <el-card shadow="hover" class="stat-card" style="margin-top: 20px;">-->
<!--      <div slot="header">-->
<!--        <span>故障传播路径追溯</span>-->
<!--        <el-button type="primary" size="mini" @click="fetchFaultPropagation">分析传播路径</el-button>-->
<!--      </div>-->
<!--      <div class="chart-center">-->
<!--        <div id="faultPropagationGraph" style="width: 80%; height: 600px; margin: 0 auto;"></div>-->
<!--      </div>-->
<!--    </el-card>-->

    <!-- 工单详情弹窗 -->
    <el-dialog
        title="运维工单详情"
        :visible.sync="workOrderDialogVisible"
        width="600px"
    >
      <div v-if="currentWorkOrder">
        <p><strong>工单ID：</strong>{{ currentWorkOrder.repair_id }}</p>
        <p><strong>故障ID：</strong>{{ currentWorkOrder.anomaly_id }}</p>
        <p><strong>设备ID：</strong>{{ currentWorkOrder.device_id }}</p>
        <p><strong>处理人ID：</strong>{{ currentWorkOrder.processor_id }}</p>
        <p><strong>状态：</strong>
          <el-tag :type="getStatusTagType(currentWorkOrder.repair_result)">
            {{ getStatusText(currentWorkOrder.repair_result) }}
          </el-tag>
        </p>
        <p><strong>维修时间：</strong>{{ formatDateTime(currentWorkOrder.repair_time) }}</p>
        <p><strong>维修备注：</strong>{{ currentWorkOrder.repair_notes }}</p>
        <p><strong>维修图片：</strong>
          <el-image
              v-if="currentWorkOrder.repair_images"
              :src="currentWorkOrder.repair_images"
              style="width: 200px; height: 150px;"
          ></el-image>
          <span v-else>无</span>
        </p>
      </div>
      <div slot="footer">
        <el-button @click="workOrderDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 故障列表 -->
    <el-card shadow="hover" class="stat-card" style="margin-top: 20px;">
      <!-- 列表内容省略 -->
      <div slot="header">
        <span>故障详情列表</span>
        <el-input
            v-model="searchId"
            placeholder="输入设备ID查询"
            style="width: 200px; margin-right: 10px;"
        />
        <el-button type="primary" size="mini" @click="fetchFaultList">查询</el-button>
        <el-button type="primary" size="mini" @click="refreshFaultList">刷新</el-button>
      </div>
      <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 10px;"
          height="400"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="alarmId" label="报警ID" width="120"></el-table-column>
        <el-table-column prop="deviceId" label="设备ID" width="120"></el-table-column>
        <el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
        <el-table-column prop="impactAnalysis" label="影响分析" min-width="200"></el-table-column>
        <el-table-column prop="repairCost" label="维修成本" width="120"></el-table-column>
        <el-table-column prop="lossCost" label="损失成本" width="120"></el-table-column>
        <el-table-column prop="totalCost" label="总成本" width="120"></el-table-column>
        <el-table-column prop="analysisTime" label="分析时间" width="180"></el-table-column>
        <!-- 新增“查看工单”操作列 -->
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="mini"
                @click="viewWorkOrder(scope.row.id)"
            >
              查看工单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 10px; text-align: right;"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { Message } from 'element-ui';
import { api } from "@/api";
import dayjs from "dayjs";

export default {
  name: 'FaultAnalysis',
  data() {
    return {
      faultTypeMap: {
        1: '绝缘故障',
        2: '机械故障',
        3: '外力故障',
        4: '误操作'
      },
      // propagationGraph: null, // 传播路径图表实例
      // propagationData: [],     // 传播路径数据
      workOrderDialogVisible: false, // 工单弹窗显隐
      currentWorkOrder: {},          // 当前工单详情
      faultTypeData: [],
      faultList: [],
      tableData: [],
      searchId: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pieChart: null
    };
  },
  mounted() {
    this.initCharts();
    this.fetchFaultTypeData();
    this.fetchFaultList();
    // this.initPropagationGraph(); // 初始化传播路径图表
    // 监听窗口大小变化，动态调整图表
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (this.pieChart) {
      this.pieChart.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initCharts() {
      const chartDom = document.getElementById('faultTypePie');
      if (!chartDom) return;
      this.pieChart = echarts.init(chartDom);
    },

    // 处理窗口 resize 事件，动态调整图表尺寸
    handleResize() {
      if (this.pieChart) {
        this.pieChart.resize();
      }
    },

    async fetchFaultTypeData() {
      try {
        const res = await api.fault.getFaultTypeDistribution();
        this.faultTypeData = res.data.data.map(item => ({
          name: this.faultTypeMap[item.value] || '未知故障',
          value: item.count
        }));
        this.renderFaultTypePie();
      } catch (error) {
        Message.error('获取故障类型分布失败：' + error.message);
      }
    },

    // 渲染图表，使用默认居中配置
    renderFaultTypePie() {
      this.pieChart.setOption({
        title: {
          text: '故障类型分布',
          left: 'center', // 标题居中
          top: 20
        },
        tooltip: { trigger: 'item' },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: this.faultTypeData.map(item => item.name)
        },
        series: [
          {
            name: '故障类型',
            type: 'pie',
            radius: '70%', // 增大图表尺寸
            center: ['50%', '50%'], // 饼图居中
            data: this.faultTypeData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },

    // 其他方法保持不变
    async fetchFaultList() {
      try {
        const res = await api.fault.getFaultList({
          deviceId: this.searchId,
          page: this.currentPage,
          pageSize: this.pageSize
        });
        this.faultList = res.data.data.records.map(item => ({
          ...item,
          faultType: this.faultTypeMap[item.faultType] || '未知故障'
        }));
        this.total = res.data.data.total;
        this.tableData = this.faultList;
      } catch (error) {
        Message.error('获取故障列表失败：' + error.message);
      }
    },

    refreshFaultList() {
      this.searchId = '';
      this.currentPage = 1;
      this.fetchFaultList();
      Message.success('已刷新故障列表');
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchFaultList();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchFaultList();
    },
    // // 初始化传播路径图表（力导向图）
    // initPropagationGraph() {
    //   const chartDom = document.getElementById('faultPropagationGraph');
    //   if (!chartDom) return;
    //   this.propagationGraph = echarts.init(chartDom);
    // },
    //
    // // 获取故障传播路径数据（TODO：对接真实后端接口）
    // async fetchFaultPropagation() {
    //   try {
    //     // TODO: 替换为真实接口，建议传当前故障ID或筛选条件
    //     // const res = await api.fault.getFaultPropagation({ faultId: 123 });
    //     // 模拟数据结构，实际需后端返回节点（nodes）和边（links）
    //     const mockData = {
    //       nodes: [
    //         { id: 'source', name: '初始故障源（变压器A）', category: 0 },
    //         { id: 'node1', name: '次生故障（开关柜B）', category: 1 },
    //         { id: 'node2', name: '次生故障（电表C）', category: 1 }
    //       ],
    //       links: [
    //         { source: 'source', target: 'node1', name: '故障触发' },
    //         { source: 'node1', target: 'node2', name: '连锁反应' }
    //       ]
    //     };
    //     this.propagationData = mockData;
    //     this.renderPropagationGraph();
    //   } catch (error) {
    //     Message.error('获取故障传播路径失败：' + error.message);
    //   }
    // },
    //
    // // 渲染传播路径力导向图
    // renderPropagationGraph() {
    //   if (!this.propagationGraph || !this.propagationData) return;
    //   this.propagationGraph.setOption({
    //     title: { text: '故障传播拓扑图', left: 'center', top: 20 },
    //     tooltip: { trigger: 'item', triggerOn: 'mousemove' },
    //     legend: { data: ['初始故障源', '次生故障'] },
    //     series: [
    //       {
    //         type: 'graph',
    //         layout: 'force', // 力导向布局
    //         data: this.propagationData.nodes,
    //         links: this.propagationData.links,
    //         categories: [
    //           { name: '初始故障源', itemStyle: { color: '#f56c6c' } },
    //           { name: '次生故障', itemStyle: { color: '#67c23a' } }
    //         ],
    //         force: {
    //           repulsion: 1000, // 节点斥力，避免重叠
    //           edgeLength: 150  // 边长度
    //         },
    //         label: { show: true, position: 'top' },
    //         emphasis: {
    //           focus: 'adjacency',
    //           lineStyle: { width: 2 }
    //         }
    //       }
    //     ]
    //   });
    //   // 监听窗口变化
    //   window.addEventListener('resize', this.handlePropagationResize);
    // },
    //
    // // 处理传播路径图表resize
    // handlePropagationResize() {
    //   if (this.propagationGraph) {
    //     this.propagationGraph.resize();
    //   }
    // },
    //
    // // 组件销毁时清理监听
    // beforeDestroy() {
    //   // ...原有逻辑
    //   window.removeEventListener('resize', this.handlePropagationResize);
    // }// 初始化传播路径图表（力导向图）
    // initPropagationGraph() {
    //   const chartDom = document.getElementById('faultPropagationGraph');
    //   if (!chartDom) return;
    //   this.propagationGraph = echarts.init(chartDom);
    // },
    //
    // // 获取故障传播路径数据（TODO：对接真实后端接口）
    // async fetchFaultPropagation() {
    //   try {
    //     // TODO: 替换为真实接口，建议传当前故障ID或筛选条件
    //     // const res = await api.fault.getFaultPropagation({ faultId: 123 });
    //     // 模拟数据结构，实际需后端返回节点（nodes）和边（links）
    //     const mockData = {
    //       nodes: [
    //         { id: 'source', name: '初始故障源（变压器A）', category: 0 },
    //         { id: 'node1', name: '次生故障（开关柜B）', category: 1 },
    //         { id: 'node2', name: '次生故障（电表C）', category: 1 }
    //       ],
    //       links: [
    //         { source: 'source', target: 'node1', name: '故障触发' },
    //         { source: 'node1', target: 'node2', name: '连锁反应' }
    //       ]
    //     };
    //     this.propagationData = mockData;
    //     this.renderPropagationGraph();
    //   } catch (error) {
    //     Message.error('获取故障传播路径失败：' + error.message);
    //   }
    // },
    //
    // // 渲染传播路径力导向图
    // renderPropagationGraph() {
    //   if (!this.propagationGraph || !this.propagationData) return;
    //   this.propagationGraph.setOption({
    //     title: { text: '故障传播拓扑图', left: 'center', top: 20 },
    //     tooltip: { trigger: 'item', triggerOn: 'mousemove' },
    //     legend: { data: ['初始故障源', '次生故障'] },
    //     series: [
    //       {
    //         type: 'graph',
    //         layout: 'force', // 力导向布局
    //         data: this.propagationData.nodes,
    //         links: this.propagationData.links,
    //         categories: [
    //           { name: '初始故障源', itemStyle: { color: '#f56c6c' } },
    //           { name: '次生故障', itemStyle: { color: '#67c23a' } }
    //         ],
    //         force: {
    //           repulsion: 1000, // 节点斥力，避免重叠
    //           edgeLength: 150  // 边长度
    //         },
    //         label: { show: true, position: 'top' },
    //         emphasis: {
    //           focus: 'adjacency',
    //           lineStyle: { width: 2 }
    //         }
    //       }
    //     ]
    //   });
    //   // 监听窗口变化
    //   window.addEventListener('resize', this.handlePropagationResize);
    // },
    //
    // // 处理传播路径图表resize
    // handlePropagationResize() {
    //   if (this.propagationGraph) {
    //     this.propagationGraph.resize();
    //   }
    // },
    //
    // // 组件销毁时清理监听
    // beforeDestroy() {
    //   // ...原有逻辑
    //   window.removeEventListener('resize', this.handlePropagationResize);
    // }
    // 查看运维工单（对接真实接口）
    async viewWorkOrder(faultId) {
      try {
        // TODO: 替换为真实接口，根据故障ID（anomaly_id）查工单
        // 假设接口：/api/workorder/findByAnomalyId?anomalyId=xxx
        const res = await api.workorder.findByAnomalyId({ anomalyId: faultId });
        this.currentWorkOrder = res.data; // 后端返回equipment_repair表数据
        this.workOrderDialogVisible = true;
      } catch (error) {
        console.error('获取工单失败：' + error.message);
      }
    },

    // 转换工单状态为文字
    getStatusText(status) {
      const statusMap = {
        0: '待办',
        1: '已处理',
        2: '处理中',
        3: '处理失败'
      };
      return statusMap[status] || '未知';
    },

    // 转换工单状态为Tag类型
    getStatusTagType(status) {
      const tagTypeMap = {
        0: 'warning',  // 待办
        1: 'success',  // 已处理
        2: 'info',     // 处理中
        3: 'danger'    // 处理失败
      };
      return tagTypeMap[status] || 'default';
    },

    // 格式化时间（用dayjs）
    formatDateTime(dateTime) {
      return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
    }
  }
};
</script>

<style scoped>
.fault-analysis-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.stat-card {
  background-color: #fff;
  padding: 15px;
}

/* 图表容器样式：使用margin: 0 auto实现水平居中 */
.chart-center {
  width: 100%;
  text-align: center; /* 确保子元素居中 */
}

/* 图表DOM元素：使用80%宽度，500px高度 */
#faultTypePie {
  width: 80% !important;
  height: 500px !important;
  margin: 0 auto !important; /* 水平居中 */
}
#faultPropagationGraph {
  width: 80% !important;
  height: 600px !important;
  margin: 0 auto !important;
}
</style>